import React from 'react'
import type { Meta, StoryObj } from '@storybook/react'
import Menu from './menu'
import MenuItem from './menuItem'
import SubMenu from './subMenu'

const meta = {
	title: 'Components/Menu',
	component: Menu,
	subcomponents: { SubMenu, MenuItem },
	parameters: {
		layout: 'centered'
		/* controls: {
			matchers: {
				date: /mode$/
			}
		} */
	},
	tags: ['autodocs'],
	argTypes: {
		/* defaultIndex: {
			control: 'number'
		} */
	}
} satisfies Meta<typeof Menu>

export default meta

type MenuStory = StoryObj<typeof meta>

export const HorizontalMenu: MenuStory = {
	name: 'Horizontal menu',
	args: {
		defaultIndex: '0',
		mode: 'horizontal'
	},
	render: (args) => (
		<Menu {...args}>
			<MenuItem>cool link</MenuItem>
			<MenuItem>cool link2</MenuItem>
			<MenuItem disabled>disabled</MenuItem>
			<SubMenu title="submenu">
				<MenuItem>cool link</MenuItem>
				<MenuItem>cool link2</MenuItem>
				<MenuItem disabled>disabled</MenuItem>
			</SubMenu>
		</Menu>
	)
}

export const ClickMenu: MenuStory = {
	name: 'Vertical menu',
	args: {
		defaultIndex: '1',
		mode: 'vertical'
	},
	parameters: {
		backgrounds: {
			values: [
				{ name: 'red', value: '#f00' },
				{ name: 'green', value: '#0f0' },
				{ name: 'blue', value: '#00f' }
			]
		}
	},
	render: (args) => (
		<Menu {...args} defaultIndex="1" mode="vertical">
			<MenuItem>cool link</MenuItem>
			<MenuItem>cool link2</MenuItem>
			<MenuItem disabled>disabled</MenuItem>
			<SubMenu title="submenu">
				<MenuItem>cool link</MenuItem>
				<MenuItem>cool link2</MenuItem>
				<MenuItem disabled>disabled</MenuItem>
			</SubMenu>
		</Menu>
	)
}
